import React, { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import isLogin from '../../../component/isLogin'
import axios from '../../../until/axios'
import "../../../api/list"
import { SETLIST, ALLSTATETYPE,LISTITEM } from "../../../type/store.d"
import { Tabs } from 'react-vant';
import Item from "../../../component/item"
import { useNavigate } from 'react-router-dom'
function Shou() {
  const navigate = useNavigate()
  const dispatch = useDispatch()
  useEffect(() => {
    if (!list.length) {
      axios.get('/api/list').then(res => {
        dispatch({
          type: SETLIST,
          payload: res.data.list
        })
      })
    }
  }, [])
  const list = useSelector((state: ALLSTATETYPE) => {
    return state.list
  })
  const handelclickItem = (item: LISTITEM) => {
    navigate(`/detile/${item.id}`, { state: item })
  }
  return (
    <div>
      <Tabs active={0}>
        <Tabs.TabPane title="标签">
          {
            list && list.map((item, index) => {
              return <Item key={index} list={item} handleClick={(item: LISTITEM) => handelclickItem(item)}></Item>
            })
          }
        </Tabs.TabPane>
        <Tabs.TabPane title="专题">
          专题
        </Tabs.TabPane>
      </Tabs>
    </div>
  )

}

export default isLogin(Shou)


